import styled from '@emotion/styled';
import { memo } from 'react';
import { Droppable } from "react-beautiful-dnd";
import { Scrollbars } from 'react-custom-scrollbars';
import TodoItem from "./TodoItem";
import { Todo } from './assets';
import { Status } from './constant';
interface Props {
    status:Status,
    todos:Todo[],
    handleEdit:(data:Todo)=>void
}
function Column(props:Props){
    return (
        <Container>
            <Title>{props.status}</Title>
            <Droppable droppableId={props.status} isDropDisabled={false}>
                {(provied, snapshot)=>(
                    <Scrollbars style={{ width: 300, height: '100%' }}
                        autoHide // 自动隐藏滚动条
                        autoHideTimeout={1000} // 自动隐藏滚动条的延迟时间
                        autoHideDuration={200} // 自动隐藏滚动条的动画持续时间
                    >
                        <TodoList ref={provied.innerRef} isDraggingOver={snapshot.isDraggingOver}>
                            {props.todos.map((todo, index)=>(<TodoItem handleEdit={props.handleEdit} key={todo.id} todo={todo} index={index}/>))}
                            {provied.placeholder}
                        </TodoList>
                    </Scrollbars>
                )
                }
            </Droppable>
        </Container>
    );

}
export default memo(Column);
const Container = styled.div`
  display: flex;
  flex-direction: column;
  padding: 16px 6px;
  background-color: azure;
  min-height:400px;
  flex: 1;
`;

const Title = styled.div`
  font-size: 20px;
  padding: 1px 8px;
  text-transform: uppercase;
  color: #ccc;
  border-bottom: 1px solid #ccc;
`;

const TodoList = styled.div<{isDraggingOver:boolean}>`
    background-color: ${props => props.isDraggingOver ? "#ADD8E6": "transparent"};
    padding: 6px 8px;
    min-height:500px;
    //overflow: auto;
`;
